<template>
  <div class="top-header-container">
    <div class="left">
      <div class="date">{{ date }}</div>
      <div class="week">{{ week }}</div>
      <div class="time">{{ time }}</div>
    </div>
    <div class="right">
      <div class="title">江都建设财务中心</div>
      <div class="icon-1" @click="toggleFullscreen">
        <i class="iconfont iconscreen-full2" v-if="isFullscreen"></i>
        <i class="iconfont iconscreen-normal2" v-else></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      week: "",
      time: "",
    };
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.initTime();
    const timer = window.setInterval(() => {
      this.initTime();
    }, 60 * 1000);
    this.$once("hook:beforeDestroy", () => {
      window.clearInterval(timer);
    });
  },
  methods: {
    toggleFullscreen() {
      this.$emit("toggleFullscreen");
    },
    initTime() {
      const time = new Date();
      let y = time.getFullYear();
      let month = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();
      if (y.length < 2) {
        y = `0${y}`;
      }
      if (month < 10) {
        month = `0${month}`;
      }
      if (d < 10) {
        d = `0${d}`;
      }
      if (h < 10) {
        h = `0${h}`;
      }
      if (s < 10) {
        s = `0${s}`;
      }
      if (m < 10) {
        m = `0${m}`;
      }
      const day = time.getDay();
      const weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      const week = weeks[day];
      this.date = `${y}-${m}-${d}`;
      this.week = week;
      this.time = `${h}:${m}`;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/views/report_form_dark/styles/fn.scss";
@import "~@/assets/dark/font/iconfont.css";

.top-header-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  padding: vh(24) vw(68) 0 vw(68);

  .left {
    display: flex;
    flex-direction: row;
    align-items: center;

    .date {
      font-size: vw(16);
      font-family: Bahnschrift;
      font-weight: 400;
      color: #8fc7ff;
      opacity: 0.4;
    }

    .week {
      font-size: vw(14);
      font-family: Microsoft YaHei;
      font-weight: 400;

      color: #8fc7ff;
      opacity: 0.64;
      margin: 0 vw(6) 0 vw(16);
    }

    .time {
      font-size: vw(16);
      font-family: Bahnschrift;
      font-weight: 400;
      color: #8fc7ff;
      opacity: 0.64;
    }
  }

  .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: vw(16);
    font-family: Bahnschrift;
    font-weight: 400;
    line-height: vh(26);
    color: #8fc7ff;

    .title {
      font-size: vw(14);
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #8fc7ff;
      letter-spacing: vw(2);
      opacity: 0.4;
      margin-right: vw(12);
    }

    .icon-1 {
      width: vw(32);
      height: vh(32);
      background: rgba(24, 144, 255, 0.24);
      border-radius: vw(4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;

      &:hover {
        opacity: 0.9;
      }

      &:active {
        opacity: 0.9;
      }

      i {
        font-size: vw(20);
      }
    }
  }
}
</style>